<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../org/angular.min.js"></script>
    <script src="../../org/angular-ui-router.min.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl">
    <a ui-sref="index">首页</a>
    <a ui-sref="home">家目录</a>
    <a href="#/list">列表页</a>
    <div ui-view>访问不存在的路由时，显示如下提示信息</div>
    <script>
        var m = angular.module('app', ['ui.router']);
        m.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
            //默认路由
            $urlRouterProvider.otherwise('/index');
            //定义路由规则
            $stateProvider
                .state('index', {
                    url: '/index',
                    template: '<h1>首页</h1>'
                })
                .state('home', {
                    url: '/home',
                    templateUrl: './view/home.html'
                })
                .state('list', {
                    url: '/list',
                    template: '<h1>列表页</h1>'
                })
        }])
        m.controller('ctrl', ['$scope', function($scope) {

        }])
    </script>
</body>

</html>
